<template>
  <div class="header">
    <div>
      <div @click="goIndex">
        <img src="@/assets/img/logo.png" alt="logo" />
        <span>全断面隧道掘进装备行业工业互联网平台</span>
      </div>
      <div class="inut1">
        <el-autocomplete
          v-model="input1"
          suffix-icon="el-icon-search"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          placeholder="请输入商品名称"
          v-if="show"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="商品" value="0"></el-option>
            <el-option label="店铺" value="1"></el-option>
          </el-select>
          <!-- <div class="shou1 el-icon-search"
                slot="append"
                @click="inputclick2"></div> -->
        </el-autocomplete>
      </div>
      <div class="ul">
        <el-dropdown
          @command="command"
          v-if="this.$store.getters.getuser.avator"
        >
          <div v-if="this.$store.getters.getuser.avator">
            <img
              :src="this.$store.getters.getuser.avator || avator"
              alt="个人头像"
            />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人中心</el-dropdown-item>
            <el-dropdown-item command="b">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div v-if="!this.$store.getters.getuser.avator">
          <img :src="avator" alt="个人头像" />
        </div>
        <div @click="document">文档</div>
        <!-- <div >个人中心</div> -->
        <div @click="seller">卖家中心</div>
        <div @click="demand">供需大厅</div>
        <!-- <div @click="tuichu"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ["show"],
  inject: ["reload"],
  data() {
    return {
      avator: require("@/assets/img/user.png"), // 默认头像
      input1: "", //Header搜索框
      select: "0"
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    if (localStorage.getItem("userId")) {
      this.getUserInfo();
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //计算属性
  computed: {},
  //方法
  methods: {
    getUserInfo() {
      const that = this;
      this.$postRequest("/api/user/getUserInfo", {
        userId: localStorage.getItem("userId")
      }).then(res => {
        // that.userInfo = res.data;
        if (res.data.level == 0) {
          res.data.levelText = "普通用户";
        } else if (res.data.level == 1) {
          res.data.levelText = "商家";
        } else if (res.data.level == 2) {
          res.data.levelText = "企业用户";
        }
        that.$store.commit("setUser", res.data);
      });
    },
    // tuichu() {
    //   localStorage.clear();
    //   this.$store.commit("setUser", {});
    //   this.$router.push({ name: 'home' })
    //   this.reload()
    // },
    goIndex() {
      this.$router.push("/");
    },
    // 跳转个人中心
    // goPersonal() {
    //   if (localStorage.getItem("userId")) {
    //     this.$router.push({ name: 'yindex' })
    //   } else {
    //     this.$router.push({ name: 'loginindex' })
    //   }
    // },
    // 跳转文档
    document() {
      this.$router.push({ name: "document" });
    },
    // 跳转卖家中心
    seller() {
      // this.$router.push({ name: '' })
      window.open(this.$urlgw);
    },
    // 跳转供需大厅
    demand() {
      this.$router.push({ name: "demand" });
    },
    async querySearchAsync(queryString, callback) {
      // var list = [{}];
      // if (this.input1) {
      //   let response = await this.$postRequest('/api/goods/findGoods', { name: this.input1, pageNum: 1, pageSize: 9999, userId: localStorage.getItem('userId') })
      //   console.log(response)
      //   for (let i of response.data.list) {
      //     i.value = i.name;  //将想要展示的数据作为value
      //   }
      //   list = response.data.list;
      //   callback(list);
      // }
      var list = [{}];
      if (this.input1) {
        if (this.select == "0") {
          let response = await this.$postRequest("/api/goods/findGoods", {
            name: this.input1,
            pageNum: 1,
            pageSize: 9999,
            userId: localStorage.getItem("userId")
          });
          console.log(response);
          for (let i of response.data.list) {
            i.value = i.name; //将想要展示的数据作为value
          }
          list = response.data.list;
        } else {
          let response = await this.$postRequest("/api/goods/searchShop", {
            name: this.input1,
            pageNum: 1,
            pageSize: 9999,
            userId: localStorage.getItem("userId")
          });
          console.log(response);
          for (let i of response.data) {
            console.log(i);
            i.value = i.name; //将想要展示的数据作为value
          }
          list = response.data;
        }
      }
      console.log("list", list);
      callback(list);
    },
    handleSelect(item) {
      // console.log(item);
      // this.inputclick(item.goodsId)
      if (this.select == "0") {
        this.inputclick(item.goodsId);
      } else {
        this.inputclick3(item.id);
      }
    },
    // 跳转店铺详情
    inputclick3(id) {
      this.$router.push({
        path: "/home/business",
        query: {
          id
        }
      });
    },
    // 跳转商品详情
    inputclick(id) {
      this.$router.push({
        path: "/home/detail",
        query: {
          id
        }
      });
    },
    command(e) {
      console.log(e);
      if (e == "a") {
        if (localStorage.getItem("userId")) {
          this.$router.push({ name: "yindex" });
        } else {
          this.$router.push({ name: "loginindex" });
        }
      } else {
        this.$alert("确定退出吗？", "退出", {
          confirmButtonText: "确定",
          callback: action => {
            console.log(action);
            if (action == "confirm") {
              localStorage.clear();
              this.$store.commit("setUser", {});
              this.$store.commit("setcart", 0);
              this.$router.push({ name: "home" });
              this.reload();
            }
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      }
    }
    // change() {

    // }
  }
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 80px;
  background: #113f85;
  /deep/ .el-autocomplete {
    margin: auto;
    width: 400px;
    .el-input-group__prepend .el-input {
      font-size: inherit;
      width: 80px;
    }
    .el-input-group__prepend {
      margin-right: 56px;
      background-color: rgba(255, 255, 255, 0.1);
      border: none;
      color: #9cacc5;
    }
  }
  & > div {
    height: 100%;
    width: 1400px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin: auto;
    & > div:nth-child(1) {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: Adobe Heiti Std;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
      img {
        width: 60px;
        height: 60px;
        margin-right: 12px;
      }
    }
    & > div.inut1 {
      flex: 1;
      text-align: right;
      display: flex;
      align-items: center;
      /deep/ .el-input__inner {
        // width: 320px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        color: rgba(156, 172, 197, 1);
        &::placeholder {
          color: rgba(156, 172, 197, 0.58);
        }
      }
    }
    div.ul {
      height: 40px;
      display: flex;
      justify-content: space-between;
      div {
        height: 100%;
        line-height: 40px;
        font-size: 16px;
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        margin-left: 20px;
      }
      div:nth-of-type(1) {
        cursor: default;
      }
      div:hover {
        color: rgb(182, 182, 182);
      }
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        // margin-left: 20px;
      }
    }
  }
}
</style>